/*
 * @Description: 编辑信息组件
 * @Author: buwei.huang
 * @Date: 2019-07-11 16:33:25
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-05 16:14:14
 */
<template>
  <div
    class="edit_info"
    :style="type == EDIT_SITE ? 'margin-top:0' : ''"
  >
    <!-- 选择地点 -->
    <div v-if="type == EDIT_SITE">
      <div class="edit_info_item flex-h flex-vc">
        <span></span>
        <div
          class="orderLine edit_info_item_data flex-h flex-vc"
          @click="goToPage"
        >
          <p
            class=" edit_info_item_font"
            :class="this.dateValue.startSite ? 'edit_info_item_fontCss' : ''"
          >{{startSite}}</p>
        </div>
      </div>
      <div class="edit_info_item flex-h flex-vc">
        <span style="border:1px solid #0ECCE6;"></span>
        <div
          class="edit_info_item_data flex-h flex-vc"
          @click="selectPicker('到达地点')"
        >
          <p
            class="edit_info_item_font"
            :class="this.dateValue.siteInfo ? 'edit_info_item_fontCss' : ''"
          >{{arriveSite}}</p>
        </div>
      </div>
      <div class="edit_info_line"></div>
    </div>
    <!-- 选择时间 -->
    <div v-if="type == EDIT_DATE">
      <div class="edit_info_item flex-h flex-vc">
        <span></span>
        <div
          class="orderLine edit_info_item_data flex-h flex-vc"
          @click="selectPicker('出发时间')"
        >
          <p
            class="edit_info_item_font"
            :class="this.dateValue.dateStartTime ? 'edit_info_item_fontCss' : ''"
          >{{dateStartTime}}</p>
        </div>
      </div>
      <div
        class="edit_info_item flex-h flex-vc"
        v-if="isAddTime"
      >
        <span style="border:1px solid #0ECCE6;"></span>
        <div
          class="orderLine edit_info_item_data flex-h flex-vc"
          @click="selectPicker('返程时间')"
        >
          <p
            class="edit_info_item_font"
            :class="this.dateValue.dateEndTime ? 'edit_info_item_fontCss' : ''"
          >{{dateEndTime}}</p>
        </div>
      </div>
      <div class="flex-h flex-hc flex-vc edit_info_item_add">
        <i
          class="icon iconfont baseColorNoAcitve"
          :class="isAddTime? 'icon-wrong' : 'icon-add-o'"
        />
        <p
          class="baseColorNoAcitve"
          @click="onAddTimeShow"
        >{{addTimeText}}</p>
      </div>
      <div
        v-if="isAddTime"
        class="edit_info_line"
      ></div>
    </div>
    <!-- textarea区域 -->
    <div
      v-if="type == EDIT_TEXTAREA"
      class="edit_info_textarea"
    >
      <textarea
        v-model="textareaValue"
        placeholder="想对我们说的话"
        maxlength="200"
        readonly
      ></textarea>
      <!-- 限制字数 -->
      <span>
        {{textareaValueLength}}/200
      </span>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    type: {
      type: Number,
      default: null
    },
    dateValue: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      EDIT_SITE: 1, // 选择地点
      EDIT_DATE: 2, // 选择时间
      EDIT_TEXTAREA: 3, // 文本区域
      textareaValue: '',
      isAddTime: false
    }
  },
  computed: {
    textareaValueLength() {
      return this.textareaValue.length
    },
    dateStartTime() {
      return this._disposeInfo(this.dateValue.dateStartTime, '请选择出发时间')
    },
    dateEndTime() {
      return this._disposeInfo(this.dateValue.dateEndTime, '请选择返程时间')
    },
    startSite() {
      if (this.dateValue.startSite) {
        return this.dateValue.startSite.NAME
      } else {
        return '请选择出发地点'
      }
    },
    arriveSite() {
      if (this.dateValue.siteInfo) {
        return this.dateValue.siteInfo.endStationName
      } else {
        return '请选择到达地点'
      }
    },
    addTimeText() {
      return this.isAddTime ? '删除返程时间' : '添加返程时间'
    }
  },
  watch: {
    textareaValue(val) {
      this.$emit('getTextareaValue', val)
    }
  },
  mounted() {
    if (this.type === this.EDIT_SITE) {
      this._addEvent()
    }
    // let data = {
    //   NAME: '睡大觉',
    //   LONGITUDE: '32.13251443',
    //   LATITUDE: '116.251365'
    // }
    // this.$set(this.dateValue, 'startSite', data)
  },
  methods: {
    // 跳转选择地点页面
    goToPage(type) {
      this.$AppRouterUtils.open('chooseSite.html?_tv=false&_rv=false&SELECT_TYPE=STARTPOINT&ROUTETYPE=customBus.html?_tv=false&_rv=false')
    },
    // 选择时间
    selectPicker(msg) {
      switch (msg) {
        case '出发时间':
          return this.$emit('selectPicker', msg, this.dateValue.dateStartTimeIndexArr)
        case '返程时间':
          return this.$emit('selectPicker', msg, this.dateValue.dateEndTimeIndexArr, true)
        case '到达地点':
          return this.$emit('selectPicker', msg, this.dateValue.siteIndex)
        default:
          return this.$emit('selectPicker', msg)
      }
    },
    // 显示返程
    onAddTimeShow() {
      if (this.isAddTime) {
        this.$emit('clearDateEnd')
      } else {
        this.$emit('addDateEnd')
      }
      this.isAddTime = !this.isAddTime
    },
    // 处理信息
    _disposeInfo(msg, text) {
      if (msg) {
        return msg
      } else {
        return text
      }
    },
    _addEvent() {
      window.onBack = msg => {
        console.log('~~~~~~~~~~~~~~~~onback')
        let data = JSON.parse(msg)
        this.$set(this.dateValue, 'startSite', data)
      }
    },
    // 清除textareaValue
    clearTextarea() {
      this.textareaValue = ''
    },
    // 设置textareaValue
    setTextareaValue(val) {
      this.textareaValue = val
    }
  }
}
</script>
<style>
.edit_info {
  background-color: #fff;
  margin-top: 32px;
  border-radius: 8px;
  position: relative;
}
.edit_info_item {
  height: 112px;
  padding-left: 32px;
  box-sizing: border-box;
}
.edit_info_item > span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(92, 131, 255, 1); /*no*/
  margin-right: 14px;
}
.edit_info_item .edit_info_item_data {
  font-size: 16px; /* no */
  /* line-height: 44px; */
  height: 112px;
  width: 504px;
  /* line-height: 112px; */
  padding-left: 18px;
}
.edit_info_item_add {
  height: 112px;
  box-sizing: border-box;
  font-size: 16px; /* no */
}
.edit_info_item_add > p {
  line-height: 44px;
  margin-left: 14px;
}
.edit_info_item_add .icon {
  font-size: 18px; /* no */
}
.edit_info_item .edit_info_item_font {
  color: #cccccc;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit_info_item .edit_info_item_fontCss {
  color: #333333;
}
.orderLine {
  border-bottom: 2px solid #dddddd;
}
.edit_info_line {
  position: absolute;
  left: 42px;
  top: 68px;
  height: 90px;
  border-left: 4px dashed #cccccc;
}
.edit_info_textarea {
  padding: 20px 20px 20px 28px;
  box-sizing: border-box;
  height: 356px;
  position: relative;
}
.edit_info_textarea > textarea {
  width: 100%;
  height: 280px;
  font-size: 16px; /* no */
  line-height: 44px;
  resize: none;
  outline: none;
  border: none;
  overflow: auto;
}
.edit_info_textarea > span {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 12px; /* no */
}
.edit_info_textarea textarea::-webkit-input-placeholder {
  color: #cccccc;
}
.edit_info_textarea textarea:-moz-placeholder {
  color: #cccccc;
}
.edit_info_textarea textarea::-moz-placeholder {
  color: #cccccc;
}
.edit_info_textarea textarea:-ms-input-placeholder {
  color: #cccccc;
}
</style>
